import { useSnapshot } from 'valtio';
import { Form, Select } from 'szcd';
import { type IControlView } from '../base';

export interface ISelectorView extends IControlView {
  value: string;
  options: Array<{ label: string; value: string }>;
  onChange?: (value: string) => void
}

const SelectorControl: React.FC<{ service: ISelectorView } & React.HTMLAttributes<HTMLDivElement>> = ({
  service,
  ...restProps
}) => {
  const snap = useSnapshot(service);
  return (
    <Form.Item label={snap.label && service.label} style={restProps.style}>
      {/* {snap.label} */}
      <Select
        value={snap.value}
        options={snap.options && service.options}
        onChange={(e) => {
          service.onChange?.(e);
        }}
      />
    </Form.Item>
  );
};

export default SelectorControl;
